<template>
    <!-- 基本信息 -->
    <div>
      <div class="title-wrapper">
        <title-name title="风险跟踪计划信息"></title-name>
        <a-icon
          v-if="showPlanBoardVisible"
          :type="planBoardVisible ? 'up' : 'down'"
          @click="planBoardVisible = !planBoardVisible"
        />
      </div>
      <div  v-if="planBoardVisible">
        <div class="mb12">
          <a-button
            :loading="exportLoading"
            class="ml12"
            type="default"
            @click="exportWord()"
            v-if="dataSource.length > 0 && form.id !== ''"
          >全部导出</a-button>
        </div>
        <!-- 表格 -->
        <a-table bordered :data-source="dataSource" :columns="columns" rowKey="id" size="default" style="width: 100%; overflow-x: auto;margin-bottom: 20px;" :pagination="false">
            <!-- 验证人 -->
            <template slot="verifierId" slot-scope="text, record, index">
              <span>{{ chechEmoById(text) }}</span>
            </template>
            <!-- 检查人 -->
            <template slot="checkerId" slot-scope="text, record, index">
              <span>{{ chechEmoById(text) }}</span>
            </template>
            <template
              slot="action"
              slot-scope="text, record, index"
            >
              <a class="base-btn" v-if="record.detailId" @click="openRecordsDetail(record)">查看质量风险记录</a>
            </template>
        </a-table>
      </div>
      
    </div>
  </template>
    
  <script>
  import { riskMonitorPlangetEmoById } from '@/api/quality/risk/monitoringPlan'
  const columns = [
      {
          title: '监控停止点',
          dataIndex: 'monitorEndpoint',
          ellipsis: true,
          width: 150,
      },
      {
          title: '验证人',
          dataIndex: 'verifierId',
          scopedSlots: { customRender: 'verifierId' },
          ellipsis: true,
          width: 150,
      },
      {
          title: '检查人',
          dataIndex: 'checkerId',
          scopedSlots: { customRender: 'checkerId' },
          ellipsis: true,
          width: 150,
      },
      {
          title: '生效日期',
          dataIndex: 'takeEffectDate',
          width: 150,
      },
      {
          title: '检查时限',
          dataIndex: 'timeLimit',
          width: 150,
      },
      {
          title: '检查频率(天/次)',
          dataIndex: 'frequency',
          width: 150,
      },
      {
          title: '任务完成率',
          dataIndex: 'lv',
          width: 120,
      },
      {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 150,
      },
  ]
  export default {
    name: 'a' + Date.now(),
    components: {
    },
    props: {
      api: {
        type: Object,
        default: () => null
      },
      // 表单
      form: {
        type: Object,
        default: () => ({})
      },
      // 只读模式
      onlyRead: {
        type: Boolean,
        default: () => false
      },
      // 是否显示箭头
      showPlanBoardVisible: {
        type: Boolean,
        default: () => false
      },
      // 默认展开
      defaultPlanBoardVisible: {
        type: Boolean,
        default: () => true
      }
    },
    computed: {
    },
    watch: {
      defaultPlanBoardVisible: {
        handler(val) {
          this.planBoardVisible = val
        },
        immediate: true,
        deep: true
      },
      'form.trackDetails': {
        handler(val) {
          if (val) {
            this.dataSource = val
          } else {
            this.dataSource = []
          }
        },
        immediate: true,
        deep: true
      },
      'form.projectId': {
        handler(val) {
          if (val) {
            this.riskMonitorPlangetEmoById()
          }
        },
        immediate: true,
        deep: true
      },
        
    },
    data() {
      this.columns = columns
      return {
        exportLoading: false,
        dataSource: [],
        organizePeopleList: [],
        currentDate: new Date(),
        planBoardVisible: false,
      }
    },
    created() {
    },
    methods: {
      async exportWord() {
        this.exportLoading = true
        this.api.excels(this.form.id).then(res => {
          setTimeout(() => {
            this.exportLoading = false
          })
          this.handleDownload(res)
        }).catch(() => {
          this.exportLoading = false
        })
      },
      /**
       * @description: 下载
       * @return {void}
       */    
      handleDownload(res){
        const blob = new Blob([res.data])
        const filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = '风险跟踪计划信息.xlsx' // 获取文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放blob对象
      },
      chechEmoById(employeeId) {
        const list = this.organizePeopleList.filter(item => item.employeeId == employeeId)
        if (list.length) {
          return list[0].employeeName
        }
        return ''
      },
      //获取项目下的人员列表
      riskMonitorPlangetEmoById() {
        if (!this.form.projectId) return
        this.fetchingOrganizePeopleList = true
        riskMonitorPlangetEmoById(this.form.projectId).then((res) => {
          this.fetchingOrganizePeopleList = false
          let obj = {}
          res.data = res.data.reduce((cur, next) => {
            obj[next.employeeId] ? '' : (obj[next.employeeId] = true && cur.push(next))
            return cur
          }, []) //设置cur默认类型为数组，并且初始值为空的数组
          this.organizePeopleList = res.data.map(item => {
            item.value = item.employeeId
            item.label = item.employeeName
            return item
          })
        })
      },
      openRecordsDetail(record) {
        this.$router.push({
          name: 'qualityriskIdentificationmonitoringRecordsReportingInfo',
          query: {
            id: record.detailId, // 业务id
            sourceId: record.escalationId,
            editModel: '2', // 操作类型
          }
        })
      }
    },
  }
  </script>
  <style lang="less" scoped>
  .title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .titleName {
      margin: 0;
    }
    .anticon {
      margin-left: 5px;
      font-size: 18px;
    }
  }
  </style>